<template>
  <div style="width: 100%">
    <!-- <div class="header">
    <el-row style="height: 100%">
        <el-col :span="8">
          <div style="margin-right: 20px">
            <img src="@/assets/style/logo.png" width="50px" />
          </div>
          <div>
            <h1>中国建设银行股份有限公司</h1>
            <p>北京市</p>
          </div>
        </el-col>
        <el-col :span="4" class="item_title">
          <p>
           <img src="@/assets/style/360View/zichan2.png" alt="" /> 
            资产规模(亿)
          </p>
          <span>300000.9</span>
        </el-col>
        <el-col :span="4" class="item_title">
          <p>
            <img src="@/assets/style/360View/caidancengji.png" alt="" /> 
            客户层级
          </p>
          <span>战略客户</span>
        </el-col>
        <el-col :span="4" class="item_title">
          <p>
           <img src="@/assets/style/360View/buchang.png" alt=""> 
          </p>
          <span>否</span>
        </el-col>
        <el-col :span="4" class="item_title">
          <p>
            <img src="@/assets/style/360View/paiming.png" alt="" />
            贡献度总排名
          </p>
          <span>9</span>
        </el-col>
      </el-row> 
    </div>-->
    <div class="detail">
      <div class="left">
        <div class="info-list">
          <div
            class="info-item"
            v-for="(item, index) in infoList"
            :key="index"
            :class="{ active: position === item.value }"
            @click="infoItemClick(item, index)"
          >
            {{ item.label }}
          </div>
        </div>
      </div>
      <div class="right">
        <!-- <div v-if="position === '1'">
          <clientServer></clientServer>
        </div> -->
        <div v-if="position === '1'" style="height: 100%">
          <informationOverview :type="type" :customerId="customerId" :customerName="customerName"></informationOverview>
        </div>
        <!-- <div v-if="position === '1'" class="item">
          <clientServer :type="type"></clientServer>
        </div> -->
        <div v-if="position === '2'" class="item">
          <basicInfo :type="type" :customerId="customerId"></basicInfo>
        </div>
        <div v-if="position === '3'" class="item">
          <contributiveInfo :type="type"></contributiveInfo>
        </div>
        <div v-if="position === '4'" class="item">
          <financialData :type="type" :customerId="customerId"></financialData>
        </div>
        <div v-if="position === '5'" class="item">
          <publicOpinionInfo :type="type" :customerId="customerId"></publicOpinionInfo>
        </div>
        <div v-if="position === '6'" class="item">
          <auditInfo :type="type"></auditInfo>
        </div>
        <div v-if="position === '7'" class="item">
          <enterpriseSeniorManager :type="type"></enterpriseSeniorManager>
        </div>
        <div v-if="position === '8'" class="item">
          <bankAuthorization :type="type" :customerId="customerId"></bankAuthorization>
        </div>
        <div v-if="position === '9'" class="item">
          <contactInfo :type="type"></contactInfo>
        </div>
        <div v-if="position === '10'" class="item">
          <visitRecord :type="type"></visitRecord>
        </div>
        <div v-if="position === '11'" class="item">
          <clientGrade :type="type"></clientGrade>
        </div>
        <div v-if="position === '12'" class="item">
          <customerContribution :type="type"></customerContribution>
        </div>
        <div v-if="position === '13'">
          <tradeInformation :type="type" :customerId="customerId"></tradeInformation>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import clientServer from './components/clientServer.vue';
import basicInfo from './components/basicInfo.vue';
import contributiveInfo from './components/contributiveInfo.vue';
import financialData from './components/financialData.vue';
import publicOpinionInfo from './components/publicOpinionInfo.vue';
import auditInfo from './components/auditInfo.vue';
import enterpriseSeniorManager from './components/enterpriseSeniorManager.vue';
import bankAuthorization from './components/bankAuthorization.vue';
import contactInfo from './components/contactInfo.vue';
import visitRecord from './components/visitRecord.vue';
import clientGrade from './components/clientGrade.vue';
import customerContribution from './components/customerContribution.vue';
import tradeInformation from './components/tradeInformation.vue';
import informationOverview from './components/informationOverview.vue';
export default {
  name: 'platform',
  components: {
    // clientServer,
    basicInfo,
    contributiveInfo,
    financialData,
    publicOpinionInfo,
    auditInfo,
    enterpriseSeniorManager,
    bankAuthorization,
    contactInfo,
    visitRecord,
    clientGrade,
    customerContribution,
    informationOverview,
    tradeInformation,
  },
  data() {
    return {
      position: '1',
      infoList: [
        // {
        //   label: "客户画像",
        //   value: "1",
        //   isActive: false,
        // },
        {
          label: '信息速览',
          value: '1',
          isActive: false,
        },
        {
          label: '基本信息',
          value: '2',
          isActive: false,
        },
        {
          label: '股东及出资信息',
          value: '3',
          isActive: false,
        },
        {
          label: '业务经营情况',
          value: '4',
          isActive: false,
        },
        {
          label: '舆情信息',
          value: '5',
          isActive: false,
        },
        {
          label: '审计信息',
          value: '6',
          isActive: false,
        },
        {
          label: '企业高管',
          value: '7',
          isActive: false,
        },
        {
          label: '行内授信',
          value: '8',
          isActive: false,
        },
        {
          label: '联系信息',
          value: '9',
          isActive: false,
        },
        {
          label: '拜访记录',
          value: '10',
          isActive: false,
        },
        {
          label: '客户等级',
          value: '11',
          isActive: false,
        },
        {
          label: '客户贡献度',
          value: '12',
          isActive: false,
        },
        {
          label: '交易信息',
          value: '13',
          isActive: false,
        },
      ],
      customerId:'',
      customerName:''
    };
  },
  watch: {
    $route: {
      immediate: true,
      handler(value) {
        this.getCurrentActive();
      },
    },
  },
  created() {
    this.type = this.$route.query.type;
    this.customerName = this.$route.query.customerName
    this.customerId = this.$route.query.customerId
  },
  mounted() {
    this.getCurrentActive();
  },

  methods: {
    getCurrentActive() {
      const path = this.$route.path;
      console.log('path', path);
      const index = path.split('details/')[1];
      if (index === 'one') {
        this.position = '1';
      }
      if (index === 'two') {
        this.position = '2';
      }
      if (index === 'three') {
        this.position = '3';
      }
    },
    infoItemClick(item, index) {
      console.log(item);
      this.position = item.value;
    },
  },
};
</script>

<style lang="scss" scoped>
.header {
  color: #fff;
  height: 120px;
  background-color: #262d47;
  margin-bottom: 16px;
  padding: 30px 16px 30px 30px;

  ::v-deep .el-row .el-col:not(:first-child) {
    border-left: 1px solid rgba(126, 163, 255, 0.3);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  ::v-deep .el-row .el-col:first-child {
    display: flex;
    height: 100%;
    align-items: center;
    border-left: none;
  }

  p {
    margin-bottom: 10px;
    font-size: 14px;
    color: #d6dcff;
  }

  span {
    font-size: 16px;
    font-weight: 700;
  }
}

.detail {
  display: flex;
  color: #fff;

  .left {
    width: 12.5rem;
    background-color: #262d47;
    height: 100%;

    .info-list {
      padding: 0.625rem;

      .info-item {
        margin-bottom: 0.125rem;
        height: 2.5rem;
        line-height: 2.5rem;
        text-align: center;
        // background-color: #363657;
        color: #959fc5;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

        &:hover {
          background-color: #1c2238 !important;
          color: #fff;
          cursor: pointer;
        }
      }

      .active {
        background-color: #1c2238 !important;
        color: #fff;
      }
    }
  }

  .left {
    width: 12.5rem;
  }

  .right {
    flex: 1;
    background-color: #262d47;
    // height: 600px;
    margin-left: 0.625rem;
    overflow: overlay;
  }
}
.item_title {
  img {
    vertical-align: -10%;
    width: 14px;
  }
}
</style>
